// ve = vue element
let ve_pet;
$(function () {
    let default_pet_info = {id: -1, name: "", birthDate: "", description: "", image: "", price: "", speciesId: -1};
    let default_species_info = {id: -1, name: "", description: ""};
    ve_pet = new Vue({
        el: "#pet-data-box",
        data: {
            page_index: 1,
            page_num: 1,
            pets: [default_pet_info],
            pointed_species: "",
            go: 1
        },
        methods: {
            get_paging_data(page) {
                ve_pet.get_pages_amount();
                if (page < 1)
                    page = 1;
                else if (page > ve_pet.page_num)
                    page = ve_pet.page_num;

                ajax_get("/pet/page/" + (page - 1), {
                    species: ve_pet.pointed_species
                }, function (response) {
                    if (response.code == null) {
                        ve_pet.pets = response;
                    }
                }, "Getting paging data of pets")
            },
            get_pages_amount() {
                ajax_get("/pet/page", {
                    species: ve_pet.pointed_species
                }, function (response) {
                    ve_pet.page_num = response;
                }, "Getting pages amount of pets")
            },
            render_modal_box(id) {
                ve_pet_info.message = "";
                ve_pet_info.errorMessage = "";
                ve_pet_info.update_button_show = true;
                ve_pet_info.local_image = null;
                ve_pet_info.uploaded_image_name = "";
                if (id < 0) {
                    Object.assign(ve_pet_info.pet, default_pet_info);
                    ve_pet_info.updating = false;
                } else {
                    Object.assign(ve_pet_info.pet, ve_pet.pets.find(pet => pet.id === id));
                    ve_pet_info.updating = true;
                }
            },
            reset_search() {
                ve_pet.pointed_species = "";
                ve_pet.get_paging_data(0);
            },

            create_species() {

            },
            delete_species() {

            }
        }
    });


    let ve_pet_info = new Vue({
        el: "#pet-info",
        data: {
            pet: {id: -1, name: "新成员", birthDate: "", description: "", image: "", price: "", speciesId: -1},
            species: [default_species_info],
            errorMessage: "",
            message: "",
            updating: true,
            update_button_show: false,
            local_image: null,
            uploaded_image_name: ""
        },
        methods: {
            create() {
                if (ve_pet_info.updating) {
                    ve_pet_info.update();
                    return;
                }
                ve_pet_info.updating = false;
                let pet = ve_pet_info.pet;

                let image = ve_pet_info.pet.image === "" ? ve_pet_info.uploaded_image_name === "" ?
                    default_image : ve_pet_info.uploaded_image_name : ve_pet_info.pet.image;
                ajax_post("/pet", {
                    name: pet.name,
                    image: image,
                    description: pet.description,
                    price: pet.price,
                    birthDate: pet.birthDate,
                    species: {
                        id: pet.speciesId
                    }
                }, function (response) {
                    if (response.code == null) {
                        ve_pet_info.message = "创建成功";
                        ve_pet_info.close_info_modal();
                    }
                }, "Creating pet")
            },
            update() {
                ve_pet_info.updating = true;
                let pet = ve_pet_info.pet;

                let image = ve_pet_info.pet.image === "" ? ve_pet_info.uploaded_image_name === "" ?
                    default_image : ve_pet_info.uploaded_image_name : ve_pet_info.pet.image;
                ajax_put("/pet", {
                    id : pet.id,
                    name: pet.name,
                    image: image,
                    description: pet.description,
                    price: pet.price,
                    birthDate: pet.birthDate,
                    species: {
                        id: pet.speciesId
                    }
                }, function (response) {
                    if (response.code == null) {
                        ve_pet_info.message = "更新成功";
                        ve_pet_info.close_info_modal();
                    }
                }, "Updating pet")
            },
            deleteIt() {
                if (confirm("确认要删除 " + ve_pet_info.pet.name +" ?")) {
                    ajax_delete("/pet/" + ve_pet_info.pet.id, function (response) {
                        if (response.code == null) {
                            ve_pet_info.message = "已删除";
                            ve_pet_info.close_info_modal();
                        }
                    }, "Deleting pet")
                }
            },
            close_info_modal() {
                ve_pet_info.update_button_show = false;
                setTimeout(function () {
                    ve_pet.get_paging_data(0);
                    clear_local_image();
                    $("#pet-info").modal("hide");
                }, 1000);
            }
        },
        computed: {
            fields_empty() {
                let pet = this.pet;
                return pet.name === "" || pet.description === "" || (this.local_image == null && pet.image === "")
                    || pet.birthDate === "" || pet.speciesId < 0;
            },
            showing_img() {
                return this.pet.image === "" ? "https://www.easyicon.net/api/resizeApi.php?id=1228554&size=128" : this.pet.image;
            },
            showing_name() {
                return this.pet.name === "" ? "新成员" : this.pet.name;
            },
            update_or_create() {
                return this.updating ? "更新" : "创建";
            },
            showing_img() {
                if (this.pet.image.startsWith("image"))
                    return imageUrl(this.pet.image);
                return (this.pet.image === "" || !this.pet.image.startsWith("http")) ?
                    default_image : this.pet.image;
            },
            have_empty_fields() {
                return (this.pet.image === "" && this.local_image == null) || this.pet.description === "";
            },
            image_uploaded() {
                return this.uploaded_image_name.startsWith("image");
            },
            showing_local_img() {
                return (this.uploaded_image_name === "" || !this.uploaded_image_name.startsWith("image")) ?
                    default_image : (imageHost() + this.uploaded_image_name);
            }
        }
    });

    function clear_local_image() {
        $("#local_pet_image").val(null);
        ve_pet_info.local_image = null;
        ve_pet_info.uploaded_image_name = "";
    }

    $("#local_pet_image").focus(function () {
        ve_pet_info.pet.image = "";
        ve_pet_info.errorMessage = "";
    });

    $("#pet_url").focus(function () {
        clear_local_image();
        delete_image(ve_pet_info.uploaded_image_name);
        ve_pet_info.errorMessage = "";
    });

    $("#local_pet_image").change(function (e) {
        delete_image(ve_pet_info.uploaded_image_name);
        ve_pet_info.uploaded_image_name = "";
        ve_pet_info.local_image = e.target.files["0"];
        upload_image(ve_pet_info.local_image, function (response) {
            if (response != null) {
                if (response.code === "0006") {
                    ve_pet_info.errorMessage = "图片不能超过 5M";
                } else {
                    ve_pet_info.uploaded_image_name = response;
                }
            }
        }, "Uploading image")
    });
    
    let ve_species = new Vue({
        el: "#species-data-box",
        data: {
            species: [default_species_info]
        },
        methods: {
            get_species() {
                get_species_for_all();
            },
            render_modal_box(id) {
                ve_species_info.message = "";
                ve_species_info.errorMessage = "";
                ve_species_info.update_button_show = true;
                if (id < 0) {
                    Object.assign(ve_species_info.species, default_species_info);
                    ve_species_info.updating = false;
                } else {
                    Object.assign(ve_species_info.species, ve_species.species.find(species => species.id === id));
                    ve_species_info.updating = true;
                }
            }
        }
    });

    let ve_species_info = new Vue({
        el: "#species-info",
        data: {
            species: {id: -1, name: "新物种", description: ""},
            updating: true,
            update_button_show: false,
            message: "",
            errorMessage: ""
        },
        methods: {
            create() {
                if (ve_species_info.updating) {
                    ve_species_info.update();
                    return;
                }
                let species = ve_species_info.species;
                ajax_post("/species", {
                    name: species.name,
                    description: species.description,
                }, function (response) {
                    if (response.code == null) {
                        ve_species_info.message = "创建成功";
                        ve_species_info.close_info_modal(false);
                    }
                }, "Creating species")
            },
            update() {
                let species = ve_species_info.species;
                ajax_put("/species", {
                    id : species.id,
                    name: species.name,
                    description: species.description,
                }, function (response) {
                    if (response.code == null) {
                        ve_species_info.message = "更新成功";
                        ve_species_info.close_info_modal(false);
                    }
                }, "Updating species")
            },
            deleteIt() {
                if (confirm("确认要删除 " + ve_species_info.species.name +" ? 这会删除所有此物种的宠物 ！")) {
                    ajax_delete("/species/" + ve_species_info.species.id, function (response) {
                        if (response.code == null) {
                            ve_species_info.message = "已删除";
                            ve_species_info.close_info_modal(true);
                        }
                    }, "Deleting species")
                }
            },
            close_info_modal(is_delete) {
                ve_species_info.update_button_show = false;
                setTimeout(function () {
                    if (is_delete)
                        ve_pet.get_paging_data(0);
                    get_species_for_all();
                    $("#species-info").modal("hide");
                }, 1000);
            }
        },
        computed: {
            fields_empty() {
                return this.species.name === "" || this.species.description === "";
            },
            showing_name() {
                return this.species.name === "" ? "新物种" : this.species.name;
            },
            update_or_create() {
                return this.updating ? "更新" : "创建";
            }
        }
    });

    function get_species_for_all() {
        ajax_get("/species", {}, function (response) {
            if (response.code == null) {
                ve_pet_info.species = response;
                ve_species.species = response;
            } else
                console.log(response.message)
        })
    }

    ve_pet.get_paging_data(0);
    get_species_for_all();
});